<template>
	<view class="content">
		<view class="map">
		    <!-- 地图组件 -->
		    <map id="map" 
				:longitude="lng" 
				:latitude="lat" 
				scale="14" 
				style="width:100%; height:500px;"
			>
		    </map>
		</view>
		<view class="main">
			<view class="info1">
				<view class="left">
					<view class="img">
						<image src="/static/1.png" mode="widthFix"></image>
					</view>
					<view class="wz">
						<view class="text1">
							<text>顺风拼车</text>
						</view>
						<view class="text2">
							<text>拼不成也派车</text>
						</view>
					</view>
				</view>
				<view class="right">
					<text class="text1">一口价</text>
					<text class="text2">31.46</text>
					<text class="text3">元</text>
					<text class="text4">顺路拼</text>
				</view>
			</view>
			<view class="info2">
				<view class="item" v-for="item in list">
					<view class="left">
						<image src="/static/1.png" mode="widthFix"></image>
						<text class="text1">快车</text>
					</view>
					<view class="right">
						<text class="text1">31.45</text>
						<text class="text2">元</text>
						<image src="/static/order/wxz.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="info2">
				<view class="title">
					<text>更多车型</text>
				</view>
				<view class="item" v-for="item in gdList">
					<view class="left">
						<image src="/static/1.png" mode="widthFix"></image>
						<text class="text1">快车</text>
					</view>
					<view class="right">
						<text class="text1">31.45</text>
						<text class="text2">元</text>
						<image src="/static/order/wxz.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="time">
			<text>现在出发 ></text>
		</view>
		<!-- 时间选择 -->
		<u-datetime-picker
		    :show="show"
		    v-model="value1"
		    mode="datetime"
		></u-datetime-picker>
		<!-- 底部 -->
		<view class="bottom">
			<view class="hz">
				<view class="left">
					<text class="text1">预计</text>
					<text class="text2">31.48-64.32</text>
					<text class="text3">元</text>
				</view>
				<view class="right">
					<text>确认呼叫</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{},{},{}],
				gdList: [
					{}
				],
				//时间选择
				show: true,
				value1: Number(new Date()),
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 200rpx;
		.main{
			position: relative;
			margin-top: -50rpx;
			padding: 50rpx 30rpx 0;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
			.info1{
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
				display: flex;
				.left{
					display: flex;
					.img{
						width: 70rpx;
						image{
							margin-top: 20rpx;
							width: 70rpx;
						}
					}
					.wz{
						margin-left: 20rpx;
						.text1{
							line-height: 50rpx;
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
						.text2{
							line-height: 40rpx;
							color: #9B9B9B;
						}
					}
				}
				.right{
					margin-left: auto;
					line-height: 80rpx;
					.text1{
						font-size: $uni-font-size-sm;
					}
					.text2{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
					.text3{
						font-size: $uni-font-size-sm;
					}
					.text4{
						margin-left: 15rpx;
						margin-top: 10rpx;
						color: #AA3E2C;
						border: 1rpx solid #AA3E2C;
						border-radius: 10rpx;
						line-height: 40rpx;
						padding: 10rpx 20rpx;
						font-weight: 500;
					}
				}
			}
			.info2{
				margin-top: 30rpx;
				.title{
					line-height: 50rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					padding-left: 20rpx;
				}
				.item{
					display: flex;
					line-height: 50rpx;
					padding: 40rpx;
					.left{
						display: flex;
						image{
							width: 60rpx;
						}
						.text1{
							margin-left: 20rpx;
							font-weight: bold;
						}
					}
					.right{
						margin-left: auto;
						display: flex;
						.text1{
							font-size: $uni-font-size-lg;
							font-weight: bold;
						}
						.text2{
							font-size: $uni-font-size-sm;
						}
						image{
							margin-left: 20rpx;
							width: 40rpx;
						}
					}
				}
			}
		}
		.time{
			margin-top: 40rpx;
			line-height: 40rpx;
			color: #7B7D7F;
			text-align: center;
			font-size: $uni-font-size-sm;
		}
		//底部
		.bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			background-color: #F8F9FD;
			z-index: 3;
			.hz{
				margin: 0 20rpx;
				height: 120rpx;
				line-height: 120rpx;
				border-radius: 60rpx;
				color: #fff;
				display: flex;
				.left{
					width: 460rpx;
					background-color: #02102B;
					border-radius: 60rpx 0 0 60rpx;
					.text1{
						margin-left: 40rpx;
					}
					.text2{
						font-size: $uni-font-size-lg;
						font-weight: bold;
					}
				}
				.right{
					width: 250rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
					text-align: center;
					background-color: #6C45D2;
					border-radius: 0 60rpx 60rpx 0;
				}
			}
		}
	}
</style>
<style>
	page{
		background-color: #F8F9FD;
	}
</style>
